<template>
  <div class="register">
    <!-- 顶部导航开始 -->
    <mt-header title="优机汇手机商城" class="header">
      <router-link to="/" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <!-- 顶部导航结束 -->
    <!-- 注册页面板开始 -->
    <div>
      <mt-field
        type="text"
        lable="用户名"
        placeholder="请输入用户名"
        @blur.native.capture="unameBlur"
        v-model="username"
        :state="unameState"
      ></mt-field>
      <mt-field
        type="password"
        lable="密码"
        placeholder="请输入密码"
        v-model="password"
        @blur.native.capture="pwdBlur"
        :state="upwdState"
      ></mt-field>
      <mt-field
        type="password"
        lable="确认密码"
        placeholder="请再次输入密码"
        v-model="password2"
        @blur.native.capture="pwd2Blur"
        :state="cpwdState"
      ></mt-field>
      <mt-button type="primary" size="large" @click="register" class="btn-reg"
        >免费注册</mt-button
      >
    </div>
    <!-- 注册页面板结束 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      password: "",
      password2: "",
      unameState: "",
      upwdState: "",
      cpwdState: "",
    };
  },
  methods: {
    unameBlur() {
      let usernameReg = /^[0-9a-zA-Z_]{6,12}$/;
      if (usernameReg.test(this.username)) {
        this.unameState = "success";
        return true;
      } else {
        this.unameState = "error";
        this.$toast({
          message: "用户名不合法",
          position: "middle",
          duration: 3000,
        });
        return false;
      }
    },
    pwdBlur() {
      let passwordReg = /^[0-9a-zA-Z_]{8,16}$/;
      if (this.password2 == "") {
        if (passwordReg.test(this.password)) {
          this.upwdState = "success";
          return true;
        } else {
          this.upwdState = "error";
          this.$toast({
            message: "密码不合法",
            position: "middle",
            duration: 3000,
          });
          return false;
        }
      } else if (this.password == this.password2) {
        this.cpwdState = "success";
        return true;
      } else {
        this.cpwdState = "error";
        this.$toast({
          message: "两次密码输入不一致",
          position: "middle",
          duration: 3000,
        });
        return false;
      }
    },
    pwd2Blur() {
      if (this.password == this.password2) {
        this.cpwdState = "success";
        return true;
      } else {
        this.cpwdState = "error";
        this.$toast({
          message: "两次密码输入不一致",
          position: "middle",
          duration: 3000,
        });
        return false;
      }
    },
    register() {
      if (this.unameBlur() && this.pwdBlur() && this.pwd2Blur()) {
        this.axios
          .post(
            "/register",
            "username=" + this.username + "&password=" + this.password
          )
          .then(res => {
            if (res.data.code == 0) {
              this.$messagebox("注册信息", "用户名已经被占用");
            } else {
              this.$messagebox("注册提示", "注册成功");
              this.$router.push("/login");
            }
          });
      }
    },
  },
};
</script>

<style scoped>
.header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
}
.register {
  margin-top: 40px;
}
.btn-reg {
  margin-top: 20px;
}
</style>
